import React, { Component } from 'react'
import "../assets/css/coupon.css"
import { userinfo,datetime } from '../utils/getUserinfo'
import Header from "../components/HeadAssembly"
import { couponRequest } from "../request/coupon_request"
export default class Coupon extends Component {
    state = {
        index:0,
        userList: [
            { content: [] },
            { content: [] },
            { content: [] }
        ]
    }
    UNSAFE_componentWillMount() {
        var uid = userinfo().uid
        couponRequest(uid).then(res => {
            this.setState({ userList: res.list })
        })
    }
    render() {
        const { userList, index } = this.state
        return (

            <div className="coupon-container">
                <Header title="优惠券"/>
                <div className="tabs">
                    <div className={index == 0 ? 'active' : ""} onClick={() => this.setState({ index: 0 })}>未使用</div>
                    <div className={index == 1 ? 'active' : ""} onClick={() => this.setState({ index: 1 })}>已使用</div>
                    <div className={index == 2 ? 'active' : ""} onClick={() => this.setState({ index: 2 })}>已失效</div>
                </div>
                <div className="list">
                    {
                        userList[index].content.map(item => (
                            <div className="item">
                                <div className="coupon-content">
                                    <div className="price">
                                        <h2>&yen; <span>{item.money}</span></h2>
                                        <small className="tips">满{item.limit_money}元可用</small>
                                    </div>
                                    <div>
                                        <p>{item.title}</p>
                                        <small>{datetime(item.begintime)}至{datetime(item.endtime)}</small>
                                    </div>
                                </div>
                                <div className="rules">
                                    {item.description}
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>

        )
    }
}
